<template>
  <div class="footer">
    <dv-border-box-10>
      <div class="screen-container-main-content">
        <div class="screen-container-main-title">
          幼儿生活作息
        </div>
        <a-row :gutter="12" style="height: 100%;">
          <a-col :span="4" style="height: 90%;">
            <p class="footer-title">睡眠</p>
            <trends-pie :width="'100%'" :height="'100%'" :className="'全园'" :data="pieData"></trends-pie>
          </a-col>
          <a-col :span="6" style="height: 80%;">
            <bar
              style="margin-top:40px"
              :barName="barName"
              :splitLineShow="false"
              :barData="barData"
              :color="['#A9F387', '#48D8BF']"
              :barWidth="10"
              :symbolSize="5"
              :width="'100%'"
              :seriesName="'平均睡眠时长(分钟)'"
              :height="'100%'"
              :dataZoomShow="false"
            >
            </bar>
          </a-col>
          <a-col :span="7" style="height: 85%;">
            <p class="footer-title">喝水</p>
            <stacked-line
            :splitLineShow="false"
              :width="'100%'"
              :height="'100%'"
              :seriesName="seriesName"
              :xData="waterXData"
              :data="waterYData"
              :dataZoomShow="false"
            ></stacked-line>
          </a-col>
          <a-col :span="7" style="height: 85%;">
            <p class="footer-title">如厕</p>
            <stacked-line
            :splitLineShow="false"
              :width="'100%'"
              :height="'100%'"
              :seriesName="seriesName"
              :xData="toiletXData"
              :data="toiletYData"
              :dataZoomShow="false"
            ></stacked-line>
          </a-col>
        </a-row>
      </div>
    </dv-border-box-10>
  </div>
</template>
<script>
import Bar from "@/components/Echarts/Bar.vue";
import TrendsPie from "@/components/Echarts/TrendsPie.vue";
import StackedLine from "@/components/Echarts/StackedLine.vue";
import { getAction } from "@/api/manage.js";
import { UI_CACHE_DB_DICT_DATA } from "@/store/mutation-types"
import Vue from "vue"
import {filterDictTextByCache} from '@/components/dict/JDictSelectUtil'
export default {
  name: 'footer-com',
  data() {
    return {
      pieData:[],
      barName:[],
      barData:[],
      seriesName:[],
      waterXData:[],
      waterYData:[],
      toiletXData:[],
      toiletYData:[],
      classType:[],
    }
  },
  components: {
    Bar,
    TrendsPie,
    StackedLine
  },

  filters: {},

  computed: {},

  created() {
    
    this.getClassList()
  },

  activated() {},

  mounted() {
    // this.classType = Vue.ls.get(UI_CACHE_DB_DICT_DATA).class_type;
  },

  methods: {
    getClassList(){
      const url = "/management/skClass/list"
      getAction(url).then((res)=>{
      if(res.success){
        this.classType = this.unique(res.result)
        this.classType.forEach(el => {
          this.seriesName.push(filterDictTextByCache("class_type",el.classType))
        });
        this.getSleep();
        this.getWater();
        this.getToilet();
      } else {
        this.$message.warning(res.message);
      }
      }).catch((error)=>{
        console.error(error);
      })
    },
    unique(arr){
      const res= new Map()
      return arr.filter((a)=> !res.has(a.classType) && res.set(a.classType,1))
    },
    getSleep(){
      const  url = "/health/sleep/lifeRecordList";
      const params = {
        queryDate:this.$skCommon.getDate(0)
      }
      getAction(url,params).then((res)=>{
        if(res.success){
          let detail = res.result[res.result.length - 1];
          detail.detail.map((item,index)=>{
            this.barName.push(item.className);
            this.barData.push(Number(item.average).toFixed(2));
          })
          this.pieData = [
            {
              name: '未戴',
              value: detail.notWear
            },
            {
              name: '未睡眠',
              value: detail.unsleep
            },
            {
              name: '一般',
              value: detail.medium
            },
            {
              name: '良',
              value: detail.good
            },
            {
              name: '差',
              value: detail.poor
            },
            {
              name: '优',
              value: detail.excellent
            }
          ];
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    getWater(){
      const url = "/cockpit/drink";
      this.waterXData.push("周一","周二","周三","周四","周五","周六","周日");
      let day = this.$skCommon.getCurrentWeekDays();
      getAction(url).then((res)=>{
        if(res.success){
          for (let i = 0; i < this.classType.length; i++) {
            const classTypeItem = this.classType[i];
            this.waterYData.push([]);
            this.seriesName.push(classTypeItem.text);
            day.forEach(item => {
              let dataItem  =  res.result.data.find(el=>el.date.substring(5) == item&& el.classType == classTypeItem.classType)
              if (dataItem ) {
                this.waterYData[i].push(Number(dataItem.average).toFixed(2))
              }else{
                this.waterYData[i].push(0)
              }
            });
          }
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    getToilet(){
      const url= "/cockpit/toilet";
      this.toiletXData.push("周一","周二","周三","周四","周五","周六","周日");
      let day = this.$skCommon.getCurrentWeekDays();
      getAction(url).then((res)=>{
        if(res.success){
          for (let i = 0; i < this.classType.length; i++) {
            const classTypeItem = this.classType[i];
            this.toiletYData.push([]);
            this.seriesName.push(classTypeItem.text);
            day.forEach(item => {
              let dataItem  =  res.result.data.find(el=>el.date.substring(5) == item&& el.classType == classTypeItem.classType)
              if (dataItem) {
                this.toiletYData[i].push(Number(dataItem.average).toFixed(2))
              }else{
                this.toiletYData[i].push(0)
              }
            });
          }
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
